<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('申请工单完成信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content pt-md">
        <form class="form-horizontal" id="form-workOrder-edit" th:object="${workOrder}">
            <input name="workId" th:field="*{workId}" type="hidden">
            <input name="filePath" type="hidden" id="filePath"/>
            <input name="fileName" type="hidden" id="fileName"/>
            <div class="form-group">
                <label class="col-sm-3 control-label">工单名称：</label>
                <div class="col-sm-8">
                    <input name="name" readonly th:field="*{name}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">工单编号：</label>
                <div class="col-sm-8">
                    <input name="eventNumber" readonly th:field="*{eventNumber}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">设备类型：</label>
                <div class="col-sm-8">
                    <select name="deviceType" readonly class="form-control" th:with="type=${@dict.getType('gy_device_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{deviceType}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">工单描述：</label>
                <div class="col-sm-8">
                    <textarea name="description"  readonly class="form-control">[[*{description}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">计划完成时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="planFinshTime"  readonly th:value="${#dates.format(workOrder.planFinshTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">实际开始时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="startTime"  class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">实际完成时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="endTime"  class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">处理内容说明：</label>
                <div class="col-sm-8">
<!--                    <input type="hidden" class="form-control" id="processContent" name="processContent">-->
                    <textarea name="description" th:name="processContent" class="form-control"></textarea>
<!--                    <div class="summernote" id="processMemoContent"></div>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">处理附件地址：</label>
                <div class="col-sm-8">
                    <input type="file" name="file" id="imgUpload" class="imgFile form-control">
                    <span class="help-block m-b-none">导入的文件大小请不要超过50M；</span>
                </div>
            </div>

        </form>
    </div>

    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
            </button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
            </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: summernote-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "gy/myWorkOrder";
        $("#form-workOrder-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            var beginDate = $('input[name="startTime"]').val();
            var endDate = $('input[name="endTime"]').val();
            var d1 = new Date(beginDate.replace(/\-/g, "\/"));
            var d2 = new Date(endDate.replace(/\-/g, "\/"));
            if (beginDate != "" && endDate != "" && d1 >= d2) {
                $.modal.alert("实际开始时间不能大于实际完成时间！");
                return;
            }
            if ($.validate.form()) {
                var sHTML = $('.summernote').summernote('code');

                $("#processContent").val(sHTML);
                $.operate.saveTab(prefix + "/edit", $('#form-workOrder-edit').serialize());
            }
        }

        $("input[name='planFinshTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='startTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='endTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $(function(){
            // 富文本
            $('.summernote').summernote({
                placeholder: '请输入内容',
                height: 400,
                lang: 'zh-CN',
                followingToolbar: false,
                dialogsInBody: true,
                callbacks: {
                    onImageUpload: function (files) {
                        sendFile(files[0], this);
                    }
                }
            });

            function sendFile(file, obj) {
                var data = new FormData();
                data.append("file", file);
                $.ajax({
                    type: "POST",
                    url: ctx + "common/upload",
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == web_status.SUCCESS) {
                            $(obj).summernote('editor.insertImage', result.url, result.fileName);
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    },
                    error: function (error) {
                        $.modal.alertWarning("图片上传失败。");
                    }
                });
            }
            //富文本

            // ------------------ 文件上传
            $("#imgUpload")
                .fileinput({
                    language: "zh", //设置语言
                    uploadUrl: ctx + 'common/upload', //上传的地址
                    allowedFileExtensions: ["jpg", "png", "jpeg", "bmp", "xls", "doc", "docx", "ppt", "pdf","zip","txt"], //接收的文件后缀
                    theme: "fa",      // 主题设置
                    //   initialPreview: url1 + filePath + fileName,        // 初始预览区域显示的图片
                    initialPreviewAsData: true,
                    // initialPreviewConfig: [
                    //      { type: "image", fileType: "image", caption: fileName }
                    //   ],
                    dropZoneEnabled: false,          // 禁止点击预览区域进行文件上传操作
                    maxFileCount: 1,                    // 最大上传为 1
                    maxFileSize: 51200,
                    showUpload: false,             // 不显示上传按钮，选择后直接上传
                    previewClass: "uploadPreview",
                })
                .on("change", function () {
                    // 清除掉上次上传的图片
                    //   $(".uploadPreview").find(".file-preview-frame:first").remove();
                    // $(".uploadPreview").find(".kv-zoom-cache:first").remove();
                })
                .on("filebatchselected", function (e, files) {
                    $(this).fileinput("upload");             // 文件选择完直接调用上传方法。
                })
                .on("fileuploaded", function (e, data, previewiId, index) {       // 上传完成后的处理
                    console.log("fileuploaded")
                    var form = data.form,
                        files = data.files,
                        extra = data.extra,
                        response = data.response,        // 响应
                        reader = data.reader;          // 文件对象

                    if (response.code == "0") {
                        $("#fileName").val(response.originalFilename)
                        $("#filePath").val(response.url)
                        var img = new Image();     // 这里上传的是图片，对图片处理获取图片的分辨率
                        img.src = response.url;
                        if (img.complete) {
                            $(this).attr("data-displayReso", img.width + "*" + img.height);
                        } else {
                            img.onload = function () {
                                $(this).attr("data-displayReso", img.width + "*" + img.height);
                            };
                        }
                    }
                });

            //------------------
        });

    </script>
</body>
</html>
